<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>大连地图</title>
    <!-- 引入高德地图JS API -->
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=e18e66edf3e406ef922d9bc9b02e93fc"></script>
    <!-- 引入 Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        #container {
            width: 100%;
            height: 100vh;
        }

        #legend {
            position: absolute;
            top: 100px;
            left: 10px;
            background-color: rgba(255, 255, 255, 0.8);
            padding: 10px;
            border-radius: 5px;
            box-shadow: 0 0 5px #999;
            z-index: 1000;
            display: block;
        }
        #legend h4 {
            margin-top: 0;
        }
        #legend i {
            margin-right: 8px;
            color: #007bff;
        }
        #toggleLegend {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 1001;
            background: #fff;
            border: none;
            padding: 15px 20px;
            font-size: 18px;
            border-radius: 10px;
            cursor: pointer;
            box-shadow: 0 0 10px #999;
            font-weight: bold;
        }
        
        #toggleDistrict {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 1001;
            background: #fff;
            border: none;
            padding: 15px 20px;
            font-size: 18px;
            border-radius: 10px;
            cursor: pointer;
            box-shadow: 0 0 10px #999;
            font-weight: bold;
        }

    </style>
</head>
<body>
<div id="container"></div>
<button id="toggleLegend">隐藏图例</button>
<div id="legend">
    <h4>图例</h4>
    <p><i class="fa-brands fa-centercode"></i> 保税区站 </p>
    <p><i class="fa-brands fa-shopify" style="color: #B197FC;"></i> 万达广场 </p>
    <p><i class="fa-solid fa-graduation-cap" style="color: #8c9eca;"></i> 大连财经学院 </p>

</div>
<script type="text/javascript">
    //图例
    var toggle = document.getElementById('toggleLegend');
    var legend = document.getElementById('legend');

    toggle.onclick = function() {
        if (legend.style.display === 'none') {
            legend.style.display = 'block';
            toggle.textContent = '隐藏图例';
        } else {
            legend.style.display = 'none';
            toggle.textContent = '显示图例';
        }
    };

    //地图
    var map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: 12,
        center: [121.802372,39.060374] // 设置中心点为保税区站
    });

    // 创建自定义图标（使用 Font Awesome 样式）
    function createCustomIcon(iconClass, color = '#007bff') {
        var iconDiv = document.createElement('div');
        iconDiv.innerHTML = '<i class="' + iconClass + '" style="font-size: 24px; color: ' + color + ';"></i>';
        iconDiv.style.width = '30px';
        iconDiv.style.height = '30px';
        iconDiv.style.display = 'flex';
        iconDiv.style.alignItems = 'center';
        iconDiv.style.justifyContent = 'center';
        iconDiv.style.background = 'white';
        iconDiv.style.borderRadius = '50%';
        iconDiv.style.boxShadow = '0 2px 6px rgba(0,0,0,0.3)';
        
        return iconDiv;
    }

    // 创建标记的函数
    function createMarker(lngLat, iconElement, title) {
        var marker = new AMap.Marker({
            position: lngLat,
            content: iconElement, // 使用自定义内容
            title: title
        });

        // 创建信息窗口
        var infoWindow = new AMap.InfoWindow({
            content: title,
            offset: new AMap.Pixel(0, -30)
        });

        // 为标记添加点击事件，点击标记时显示信息窗口
        marker.on('click', function() {
            infoWindow.open(map, marker.getPosition());
        });

        marker.setMap(map);
    }

    // 创建标记并加上文字备注
    createMarker(new AMap.LngLat(121.802372,39.060374), createCustomIcon('fa-brands fa-centercode', '#007bff'), '保税区站（1.6k~1.8k|60m²）');
    createMarker(new AMap.LngLat(121.783285,39.059869), createCustomIcon('fa-brands fa-shopify', '#B197FC'), '万达广场（开发区店）');
    createMarker(new AMap.LngLat(121.831911,39.08768), createCustomIcon('fa-solid fa-graduation-cap', '#8c9eca'), '大连财经学院');



</script>
</body>
</html> 